<!-- <input type="text" value=""> -->

<script>
    // window.onload = function (e) {
    //     var e = e || window.event
    //     console.log(e)
    // }

    // var btnObj = document.querySelector('button')
    // btnObj.addEventListener('click', function (e) {
    //     var e = e || window.event
    //     console.log(e)

    //     // 操作的标签
    //     var target = e.target || e.srcElement
    //     // console.log(target)
    // })


    // var inp = document.querySelector('input')
    // inp.onclick = function () {
    //     if(keyCode == 13){
    //         console.log(666);
    //     }
    // }

    // document.keyup = function (e) {
    //     // 事件对象的兼容写法
    //     e = e || window.event

    //     // 获取键盘码的兼容写法
    //     var keyCode = e.keyCode || e.which

    //     console.log(keyCode)
    // }

</script>
<!-- <form action="">
    <p>
        用户名：
        <input type="text" name="uname" id="">
    </p>
    <p>
        密码：
        <input type="text" name="pwd" id="">
    </p>
    <p>
        <input type="submit" value="登录" id="">
    </p>
</form>


<script>
    // 1. 监控你回车了
    // 2. 用js实现表单提交 

    // 1. 监控你回车了（给整个网页设置键盘按下事件 - 判断是哪个键
    document.addEventListener('keydown', function (e) {
        console.log('你操作键盘了')
        // 1.1 先获取事件对象 
        var e = e || window.event
        // console.log(e)
        // 1.2 在获取keyCode
        var keyCode = e.keyCode || e.which

        // 1.3 判断等于13
        if (keyCode == 13) {
            // console.log('监控按下回车，表单提交中...')
            // 通过js语法  表单对象.submit()
            //      作用：相当于你点击了提交按钮
            alert('提交')
            var formObj = document.querySelector('form')
            formObj.submit()
        }
    }) -->
<!-- // 2. 用js实现表单提交 -->
</script>
<style>
    #day1 {
        position: relative;
        width: 600px;
        height: 800px;
        background: chartreuse;
    }

    .day1 {
        position: relative;
        width: 100%;
        background: coral;
    }

    .p1 {
        text-align: center;
    }

    .day2 {
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    .day2>input {
        width: 100%;
        height: 100px;
    }

    .day2>button {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .input1 {
        width: 600px;
        height: 100px;
    }
</style>
<div id="day1">
    <div class="day1">
        <p class="p1">南京千峰张子枫别名王佩如</p>
    </div>
    <div class="day2">
        <input type="text" value="" class="input1">
        <button class="button">发送</button>
    </div>
</div>


<div class="d1" style="margin-top:60;">
    <input type="text" value="" class="input2">
    <button class="btn1">发送</button>
</div>


<script>
    var btn = document.querySelector('.button')
    btn.onclick = function () {
        var p = document.createElement('p')
        p.style.background = 'red'
        var kk = document.querySelector('.input1')
        p.innerText = '我：' + kk.value
        document.querySelector('#day1').appendChild(p)
        kk.value = ''
    }

    var btn2 = document.querySelector('.btn1')
    btn2.onclick = function () {
        var p = document.createElement('p')
        p.style.background = 'pink'
        var kk1 = document.querySelector('.input2')
        p.innerText = '对方：' + kk1.value
        document.querySelector('#day1').appendChild(p)
        kk1.value = ''
    }

</script>



<div id="divObj" style="width: 300px;height: 300px; background: bisque;">
</div>

<script>
    var divObj = document.querySelector('#divObj')
    divObj.onmousemove = function (e) {
        this.innerHTML = e.offsetX + ',' + e.offsetY
    }
</script>


<!-- <ol> -->
    <!-- 
        假设：这是文章列表  文章标题长  长  无法全部显示
         title="锄禾日当午，汗滴禾下土。谁知盘中餐， 粒粒皆辛苦。"

         现在也在自己的框框里面  我随便给li加个属性
         然后里面放全部数据

         将这里面数据 放到  div
     -->
    <!-- <li tit="人.......">人之初 性本善..</li>
    <li tit="锄禾日当午，汗滴禾下土。谁知盘中餐， 粒粒皆辛苦。">锄禾日当午..</li>
    <li tit="神龙教主洪福齐天、寿与天齐">神龙教主洪福齐天...</li>
</ol>

<div id="divObj" style="position:absolute; display:none;width:200px; height: 40px;border:solid 1px green;">
    先没有内容
</div> -->
<script>
    // 步骤1：先在页面显示有序列表
    // 步骤2：在任意位置搞一个框框，搞好样式之后，隐藏（后期通过position：absolute   相当于body  clientX clientY）
    // 步骤3：获取所有li 遍历加移动事件，
    // var liObjs = document.querySelectorAll('li')
    // for (var i = 0; i < liObjs.length; i++) {
    //     liObjs[i].onmousemove = function (e) {
    //         var e = e || window.event

    //         // console.log(this.clientHeight) // CSS height + CSS padding 

    //         var divObj = document.querySelector('#divObj')

    //         divObj.innerText = this.getAttribute('tit') // 先获取li标签内容，放到div中
    //         divObj.style.display = 'inline-block'       // 在显示 div
    //         // 设置div宽度高度
    //         divObj.style.left = e.clientX + 'px'
    //         // divObj.style.top = e.clientY + 'px'  // 框框不要遮盖li标签
    //         divObj.style.top = (e.clientY + this.clientHeight) + 'px'
    //     }

    //     liObjs[i].onmouseout = function () {

    //         var divObj = document.querySelector('#divObj')
    //         divObj.style.display = 'none'
    //     }
    // }
// 步骤4：事件处理函数里面  通过事件对象获取坐标 给框框设置定位left top
// 步骤5：移除li隐藏
</script>